<template>
    <main-layout :showHome="!isFromList" :showBack="isFromList" :title="`${isEdit ? '编辑':'新增'}项目`">
        <div class="form-box">
            <van-form @submit="onSubmit">
                <div class="title">基本信息</div>
                <van-field
                    v-model="pageData.createName"
                    label="创建人"
                    readonly
                    placeholder="请输入项目名称"
                    :rules="[{ required: true }]"/>
                <van-field
                    v-model="pageData.createTime"
                    label="创建时间"
                    placeholder="请选择创建时间"
                    :rules="[{ required: true }]">
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="timeShow = true" native-type="button">选择时间</van-button>
                    </template>
                </van-field>
                <van-field
                    v-model="pageData.projectName"
                    label="项目名称"
                    placeholder="请选择项目名称"
                    :rules="[{ required: true }]">
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="Show('projectShow')" native-type="button">选择项目</van-button>
                    </template>
                </van-field>
                <div class="title">材料信息</div>
                <van-field
                    v-model="pageData.materialName"
                    label="材料名称"
                    placeholder="请选择材料名称"
                    :rules="[{ required: true }]">
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="Show('materialShow')" native-type="button">选择材料</van-button>
                    </template>
                </van-field>
                <van-field
                    v-model="pageData.purchaseAmount"
                    label="采购数量"
                    placeholder="请输入采购数量"
                    :rules="[
                        { required: true },
                    ]"/>
                <van-field
                    v-model="pageData.measurementUnit"
                    label="计量单位"
                    placeholder="下拉框不会做"
                    :rules="[
                        { required: true },
                    ]"/>
                <van-field
                    v-model="pageData.price"
                    label="采购单价"
                    placeholder="请输入采购单价"
                    :rules="[
                        { required: true },
                        { validator, message: '请正确输入联系电话' }
                    ]"/>
                <div class="title">供应商信息</div>
                <van-field
                    v-model="pageData.supplierName"
                    label="名称"
                    placeholder="请选择供应商"
                    :rules="[{ required: true }]">
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="Show('supplierShow')" native-type="button">选择供应商</van-button>
                    </template>
                </van-field>
                <van-field
                    v-model="pageData.supplierContact"
                    label="联系人"
                    placeholder="请输入联系人"
                    :rules="[{ required: true }]"/>
                <van-field
                    v-model="pageData.supplierPhone"
                    label="联系电话"
                    placeholder="请输入联系电话"
                    :rules="[
                        { required: true },
                        { validator, message: '请正确输入联系电话' }
                    ]"/>
                <div class="title">审批信息</div>
                <van-field
                    v-model="pageData.liableName"
                    label="审批人"
                    placeholder="请选择审批人"
                    :rules="[{ required: true }]">
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="Show('personShow')" native-type="button">选择负责人</van-button>
                    </template>
                </van-field>
                <van-field
                    v-model="pageData.remark"
                    rows="2"
                    autosize
                    label="备注"
                    type="textarea"
                    height="170px"
                    placeholder="请输入备注"
                    show-word-limit/>

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" color="#ff5b02">提交</van-button>
                </div>
            </van-form>
            <!-- 日期组件 -->
            <van-calendar v-model="timeShow" @confirm="pickTime" />
            <!-- <van-popup v-model="timeShow"
                position="bottom"
                :style="{ height: '308px' }">
                    <van-datetime-picker v-model="signTime"
                        @cancel="timeShow = false"
                        @confirm="pickTime"
                        type="datetime"
                        title="选择年月日"/>
            </van-popup> -->
            <!-- 选择负责人 -->
            <van-popup v-model="show"
                position="right"
                :style="{ height: '100%', width: '80%' }">
                <div class="user-box">
                    <header>
                        <input type="text" v-model="personQuery.name" placeholder="输入关键字查询">
                        <!-- <button @click="pickPerson(true)">查询</button> -->
                        <button>查询</button>
                    </header>
                    <ul @scroll="scrollEvt">
                            <!-- @click="pickUser(item)" -->
                        <li v-for="item in personList"
                            :key="item.id">
                            {{item.name}} {{item.dept}} {{item.duties}}
                        </li>
                        <li class="more">
                            {{
                                loading ? '加载中...' : hasMore ? '上滑加载更多' : '不要滑了，没有了'
                            }}
                        </li>
                    </ul>
                </div>
            </van-popup>
        </div>
    </main-layout>
</template>

<script>
import { dateFormat } from '../../util'
export default {
  data () {
    return {
      isFromList: false,
      isEdit: false,
      pageData: {
        createName: '', // 创建人
        createTime: '', // 创建时间
        projectName: '', // 项目名称
        materialName: '', // 材料名称
        purchaseAmount: '', // 采购数量
        measurementUnit: '', // 计量单位
        price: '', // 采购单价
        supplierName: '', // 供应商名称
        supplierContact: '', // 供应商联系人
        supplierPhone: '', // 供应商联系电话
        liableName: '', // 审批人
        remark: '' // 备注信息
        // nextId: '',
        // projectId: '',
        // materialId: '',
        // materialUnit: '',
        // materialWeight: '',
        // supplierId: '',
        // createId: ''
      },
      signTime: new Date(),
      timeShow: false,
      // 查询项目、材料、供应商、负责人信息
      personQuery: {
        name: '',
        page: 1,
        size: 20
      },
      //   show: [
      //     { projectShow: false },
      //     { materialShow: false },
      //     { supplierShow: false },
      //     { personShow: false }
      //   ],
      show: false,
      hasMore: false,
      loading: false,
      personList: []
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters['common/userInfo']
    }
  },
  created () {
    this.isFromList = !!this.$route.query.from
    this.isEdit = !!this.$route.query.id

    this.pageData.createId = this.userInfo.id
    // 获取到登录账号的用户名
    this.pageData.createName = this.userInfo.name
  },
  methods: {
    Show (name) {
      // 需要把查询条件重置为空
      this.personQuery.page = 1
      this.personList = []
      // 加载状态开启
      this.loading = true

      if (name === 'projectShow') {
        console.log('选择项目')
        // 发起数据请求
        // this.getPersonList()
        // this.personQuery.name = ''
        // this.personShow = true
        this.show = true
      }
      if (name === 'materialShow') {
        console.log('选择材料')
      }
      if (name === 'supplierShow') {
        console.log('选择供应商')
      }
      if (name === 'personShow') {
        console.log('选择负责人')
      }
    },
    // 函数校检电话号码
    validator (val) {
      return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(val)
    },
    // 提交
    onSubmit () {
    },
    // 确定时间
    pickTime (val) {
      this.pageData.createTime = dateFormat(val, 'yyyy/MM/dd hh:mm:ss')
      this.timeShow = false
    },
    scrollEvt () {

    }

  }
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';
    .form-box{
        padding: 4px 12px;
        .title{
            display: block;
            font-size: .8rem;
            padding: 10px 0;
        }
    }
    .user-box {
        display: block;
        height: 100%;
        > header {
            display: flex;
            padding: 8px 12px;
            border-bottom: 1px solid @cdd;
            input {
                flex: 1;
                padding: 0;
                outline: none;
                border: none;
                font-size: .7rem;
                color: @c33;
                line-height: 32px;
            }
            button {
                flex: 0 0 68px;
                height: 32px;
                background-color: @primary;
                border: none;
                color: @cff;
                font-size: .7rem;
            }
        }
        ul {
            display: block;
            padding: 8px 12px;
            height: calc(100% - 49px);
            overflow-x: hidden;
            li {
                border-bottom: 1px solid #ddd;
                font-size: .7rem;
                padding: 10px;
                &:last-child {
                    border-bottom: none;
                    color: @c99;
                }
            }
        }
    }
</style>
